@import '../../mixins.scss';
.explorePage {
  min-height: 700px;
  padding-top: 100px;
  .resultNotFound {
    font-size: 24px;
    color: var(--black-light);
  }
  .pageHeader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    flex-direction: column;
    @include md {
      flex-direction: row;
    }
  }
  .pageTitle {
    font-size: 24px;
    line-height: 34px;
    color: white;
    margin-bottom: 20px;
    @include md {
      margin-bottom: 0;
    }
  }
  .filters {
    display: flex;
    gap: 10px;
    flex-direction: column;
    @include md {
      flex-direction: row;
    }
    .react-select-container {
      &.genresDD {
        width: 100%;
        @include md {
          max-width: 500px;
          min-width: 250px;
        }
      }
      &.sortbyDD {
        width: 100%;
        flex-shrink: 0;
        @include md {
          width: 250px;
        }
      }
      .react-select__control {
        border: 0;
        outline: 0;
        box-shadow: none;
        background-color: var(--black-light);
        border-radius: 20px;
        .react-select__value-container {
          .react-select__placeholder,
          .react-select__input-container {
            color: white;
            margin: 0 10px;
          }
        }
        .react-select__single-value {
          color: white;
        }
        .react-select__multi-value {
          background-color: var(--black3);
          border-radius: 10px;
          .react-select__multi-value__label {
            color: white;
          }
          .react-select__multi-value__remove {
            background-color: transparent;
            color: white;
            cursor: pointer;
            &:hover {
              color: var(--black-lighter);
            }
          }
        }
      }
      .react-select__menu {
        top: 40px;
        margin: 0;
        padding: 0;
      }
    }
  }
  .content {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    margin-bottom: 50px;
    @include md {
      gap: 20px;
    }
    .movieCard {
      .posterBlock {
        margin-bottom: 30px;
      }
    }
  }
}
